<template>
    <div class="login">
        <el-form :model="formLogin" :rules="fromLoginRules" ref="formLogin" label-position="left" label-width="0px" class="login-container">
            <h3 class="title">版权云注册</h3>
            <!-- <el-form-item prop="account">
                <el-radio-group v-model="formLogin.user_type">
                    <el-radio label="1">个人</el-radio>
                    <el-radio label="2">企业</el-radio>
                </el-radio-group>
            </el-form-item> -->
            <el-form-item prop="mobile">
                <el-input type="text" v-model="formLogin.mobile" auto-complete="off" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item prop="send">
                <el-input type="text" v-model="formLogin.send" auto-complete="off" placeholder="验证码">
                    <el-button slot="append" @click="getCheck" v-if="!computedTime">获取验证码</el-button>
                    <el-button disabled slot="append" v-else>已发送{{computedTime}}s</el-button>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="formLogin.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="password2">
                <el-input type="password" v-model="formLogin.password2" auto-complete="off" placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item prop="email">
                <el-input type="text" v-model="formLogin.email" auto-complete="off" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">同意协议并注册</el-button>
            </el-form-item>
            
            <div class="agree-toLogin clear">
                <div class="agree left"><el-checkbox v-model="checked">版权云服务协议</el-checkbox></div>
                <div class="toLogin right">已有账号？立即<router-link to="/login">登录</router-link></div>
            </div>
        </el-form>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { register, zipUrl, verify, check } from '@/api'
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入密码'));
            } else {
            if (this.formLogin.password2 !== '') {
                this.$refs.formLogin.validateField('password2');
            }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formLogin.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            logining: false,
            checked: false,
            computedTime: 0, //倒数记时
            formLogin: {
                mobile: '',
                send: '',
                // user_type: '1',
                password: '',
                password2: '',
                email: '',
            },
            fromLoginRules: {
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                send: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    //{ validator: validaePass2 }
                ],
                password: [
                    { validator: validatePass }
                ],
                password2: [
                    { validator: validatePass2 }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                ],
            },
            // 以上
            user_type:{

            },
            mobile: {
                value: "",
                act: false
            },
            eml: {
                value: "",
                act: false
            },
            password: {
                value: "",
                act: false
            },
            passwordS: {
                value: "",
                act: false
            },
            send: "", //短息验证码
            captcha: "", //图片验证码
            options: [
                {
                    value: "1",
                    label: "个人"
                },
                {
                    value: "2",
                    label: "企业"
                }
            ],
            value: "个人",
            userType: 1,
            ImageUrl: "",
            centerDialogVisible: false,
            dis: true,
            count: "",
            timer: null
        };
    },
    methods: {
        ...mapMutations([
            'RECORD_croUser',
        ]),
        // 正则验证
        testTel() {
            let Tel = /^((13[0-9])|(15[^4])|(18[0-9])|(17[0-8])|(147,145))\d{8}$/;
            if (this.mobile.value.trim()) {
                Tel.test(this.mobile.value)
                    ? (this.mobile.act = false)
                    : (this.mobile.act = true);
            }
        },
        testEm() {
            let Email = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
            if (this.eml.value != "") {
                Email.test(this.eml.value)
                    ? (this.eml.act = false)
                    : (this.eml.act = true);
            }
        },
        // 注册
        handleSubmit(){
            if (this.checked) {
                let para = Object.assign({}, this.formLogin);
                console.log(para);
                register(para).then(res => {
                    let { data, msg, sessionid } = res;
                    if (!data) {
                        this.$message.error(msg);
                    } else {
                        let croUser = Object.assign({}, data);
                            croUser.sessionid = sessionid;
                        this.RECORD_croUser(croUser);
                        this.$router.push('/index');
                    }
                });
            } else {
                this.$message.warning("必须同意版权云服务协议");
            }
        },
        
        getCheck(){
            this.computedTime = 60;
            this.timer = setInterval(() => {
                this.computedTime --;
                if (this.computedTime == 0) {
                    clearInterval(this.timer)
                }
            }, 1000)
            
            var para = {
                mobile: this.formLogin.mobile
            };
            check(para).then(res => {
                if (res.data) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            });
        },
        // 倒计时
        getCode() {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.dis = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.dis = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
            }
        }
    }
};
</script>
<style lang="scss" scoped>

.login {
    width: 1200px;
    margin: 15px auto;
    border: 1px solid #e9e9e9;
    background-color: #fff;
}
.login-container {
	margin: 100px auto;
	width: 350px;
	padding: 35px 35px 15px 35px;
	.title {
		margin: 0px auto 22px auto;
		text-align: center;
		color: #505458;
	}
    .toLogin {
        float: right;
        font-size: 14px;
        line-height: 19px;
        padding-top: 2px;
        a {
            color: #BE1414;
        }
    }
}
.content {
    min-width: 1200px;
    min-height: calc(100vh - 248px);
    background-color: #f7f7f7;
    /*padding: 15px 0 20px 0;*/
    .register {
        width: 1200px;
        min-height: calc(100vh - 248px);
        margin: 15px auto;
        padding: 0 15px;
        border: 1px solid #e9e9e9;
        background-color: #fff;
        text-align: center;
        font-size: 15px;
        .register_ul {
            & > #logo {
                margin: 15px auto;
            }
            & > li:not(#logo) {
            }
            & > li {
                width: 360px;
                margin: 25px auto;
                text-align: center;
                flex-wrap: wrap;
                position: relative;
                img {
                    width: 64px;
                }
                p {
                    font-size: 18px;
                    font-weight: bolder;
                }
                input {
                    width: 345px;
                    height: 40px;
                    border: 1px solid #e9e9e9;
                    background-color: #fff;
                    padding-left: 15px;
                    flex: 1;
                    font-size: 15px;
                    float: left;
                }
                input[type="button"] {
                    width: 100%;
                }
                #tel {
                    float: left;
                    display: block;
                    height: 42px;
                    width: 50px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 15px;
                    color: #cccccc;
                    border: 1px solid #e9e9e9;
                    border-right: 0;
                }
                #tels {
                    width: 292px;
                }
                #mobile {
                    width: 200px;
                    float: left;
                }
                .verification {
                    width: 130px;
                    height: 44px;
                    text-align: center;
                    /*line-height: 44px;*/
                    font-size: 15px;
                    background-color: #3d75c9;
                    margin-left: 10px;
                    float: right;
                }
                #register {
                    flex: 1;
                    background-color: #3d75c9;
                    color: #fff;
                    font-size: 15px;
                    height: 44px;
                }
                #checkbox {
                    flex: none;
                    margin: 0 3px;
                }
                a {
                    line-height: 40px;
                    color: #0a5bc0;
                }
                #agreement {
                    text-decoration: underline;
                }
                & > .error {
                    width: 200px;
                    text-align: left;
                    font-size: 13px;
                    font-weight: 500;
                    color: red;
                    position: absolute;
                    right: -210px;
                    line-height: 40px;
                }
            }
            /* & > .yanz {
				margin-bottom: 25px;
			}*/

            & > .agreement {
                justify-content: center;
            }
        }
    }
}

.verifyBox {
    width: 400px;
    text-align: center;
    margin: 0 auto;
}

#verifyInp {
    float: left;
    width: 180px;
    padding-left: 20px;
    height: 50px;
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 18px;
}

.verifyImg {
    float: right;
    display: inline-block;
    height: 50px;
}
</style>
